import { React, useState, useEffect } from "react";
import "./myAccount.css";
import "../../../index.css";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import vegetable from "../../../static/蔬菜.png";
import InterIP from '../../../IP/IP'
export default function Myaccount() {

  let IP = InterIP().props.children;
  var userID = document.cookie.slice(5);

  const [userState, setUserState] = useState();
  const [integral, setIntegralState] = useState();
  const [money, setMoneyState] = useState();
  const [portrait, setPortrait] = useState()
  const navigate = useNavigate();

  function go_mybill() {
    navigate("/home/person/myBill");
  }
  function go_recharge() {
    navigate("/home/person/recharge");
  }
  function go_exchange() {
    navigate("/home/person/exchange");
  }
  useEffect(() => {
    axios.post("http://" + IP + ":3000/user/SelMoney", {
      id: userID,
    })
      .then((res) => {
        setUserState((userState) => (userState = res.data[0].nickname));
        setIntegralState((integral) => (integral = res.data[0].integral));
        setMoneyState((money) => (money = res.data[0].money));
        setPortrait((data) => (data = res.data[0].user_header));
        // console.log(res.data[0]);              //金币
        // console.log(res.data[0].user_name);         //账户名
        // console.log(res.data[0].integral);          //积分
      });

  })

  return (
    <div id="myaccoun">
      <div className="myaccoun_top">
        <div className="top_1">
          <img src={portrait} alt=""></img>
        </div>
        <span className="top_2">
          你好，<span>{userState}</span>
        </span>
        <div className="top_3">
          <div>当前积分</div>
          <div className="top_1_1">{integral}</div>
        </div>

        <div className="top_4" onClick={go_mybill}>
          <div>我的钱包/账单</div>
          <div className="top_1_1">
            ￥ <span>{money}</span>
          </div>
        </div>

        <div className="top_5">
          <div className="top_5_1" onClick={go_recharge}>
            充值有礼
          </div>
          <div className="top_5_2" onClick={go_exchange}>
            充值卡兑换
          </div>
        </div>
      </div>

      <div className="myaccoun_bottom">
        <img src={vegetable} alt=""></img>
      </div>
    </div>
  );
}
